<!DOCTYPE html>
<html lang="ch">
	<head>
		<meta charset="utf-8">
		<title>兔展导数据</title>
		
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >  
		
		
		<link rel="stylesheet" href="http://code.z01.com/v4/dist/css/bootstrap.min.css" >
		<script src="http://code.jquery.com/jquery-latest.min.js" ></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
		<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
		<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
		
		

		<script type="text/javascript" src="tableExport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
		<script type="text/javascript" src="tableExport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>

			   
	   <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/export/bootstrap-table-export.js"></script>
	   <script type="text/javascript" src="tableExport.jquery.plugin/tableExport.js"></script>
	   <script type="text/javascript" src="tableExport.jquery.plugin/libs/js-xlsx/xlsx.core.min.js"></script>
	   <script type="text/javascript" src="tableExport.jquery.plugin/libs/FileSaver/FileSaver.min.js"></script>
	   
	   
	   

	   <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

	   <link rel="stylesheet" href="index.css?t=1">

		
		
	</head>
	<body>
		
		
		<div id="loading" class="text-center" style="display: none;">
		  <div class="spinner-border" role="status">
		    <span class="sr-only">Loading...</span>
		  </div>
		</div>
		

		<!-- 头部begin -->
		<div class="container-sm header">
			
			<div class="row" >
				<div class="col">
					<span>数据导出工具</span>
				</div>
			</div>
			
		</div>
		<!-- 头部end -->
		
		<!-- 查询begin -->
		<div class="container-sm mt-3 border p-3">
			<div class="row">
				<div class="col">
					<form class="container-sm" id="tuzhan_form">
					   <div class="form-group row">
						   <div class="col">
								筛选器
						   </div>
					   </div>
					   <div class="form-group row">
						   <label for="exampleInputEmail1" class="col-2 col-form-label">开始日期</label>
						   <input type="date" class="form-control col-5"  name="starDate">
						   <input type="time" class="form-control col-5"   name="starTime" value="00:00">
						   <small id="emailHelp" class="form-text text-muted col-12 mt-2">请输入要查询的开始日期和时间.</small>
					   </div>
					   <div class="form-group row">
						   <label for="exampleInputEmail1" class="col-2 col-form-label">结束日期</label>
						   <input type="date" class="form-control col-5"  name="endDate" >
						   <input type="time" class="form-control col-5" name="endTime"  value="23:59">
						   <small id="emailHelp" class="form-text text-muted  col-12 mt-2">请输入要查询的结束日期和时间.</small>
					   </div>
					  <div class="form-group row">
					    <label for="exampleInputEmail1" class="col-form-label col-2">AppId</label>
					    <select class="form-control  col-10" name="appid">
							<option class="form-control " value="20dc4607-b106-481c-8b0f-93cfedc6fd99">曲美家居「全房配」最强攻略来了</option>
							<option class="form-control " value="892a75b9-707a-4fcf-9c44-b5da0b36cf42">出格记</option>
						</select>
						<small id="emailHelp" class="form-text text-muted col-12 mt-2">要查询的APPID.</small>
					  </div>
					  <div class="form-group row">
					    <label for="exampleInputEmail1" class="col-form-label col-2">Cookie</label>
					    <textarea class="form-control  col-10" name="Cookie"></textarea>					
						<small id="emailHelp" class="form-text text-muted col-12 mt-2">要设置的Cookie,如数据正常可不用更改.</small>
					  </div>
					  
					</form>
				</div>
			</div>
			<div class="row">
				<dov class="col">
					<button id="seacher" class="btn btn-primary float-right mr-2">查询</button>
					<button id="exportExcel" class="btn btn-primary float-right mr-2" >导出</button>
				</dov>
				
			</div>
		</div>
		<!-- 查询end -->
		<!-- 表格区数据begin -->
		<div class="container-sm my-3">
			<div id="dataVewCount" class="row">
				<div class="col text-center">浏览人数：255</div>
				<div class="col text-center">表单数：255</div>
				<div class="col text-center">用户数：255</div>
			</div>
		</div>
		<!-- 表格区数据end -->
		<!-- 表格区begin -->
		<div class="container-sm">
			<div class="row">
				<div class="col">
					<table id="table_tz"></table>
				</div>
			</div>
		</div>
		<!-- 表格区end -->
	</body>
</html>

<script>
$(function(){
	

	init()
	$("#seacher").click(function(){
		tableUp()
	})
	

	
	//数据查询更新功能
	function tableUp(){
		
		html_DataVewCountReset()
		let o = getFormJson('#tuzhan_form')
		o['starDateTime'] = o['starDate'] + ' ' + o['starTime'] + ':00'
		o['endDateTime'] = o['endDate'] + ' ' + o['endTime'] + ':59'
		o["keyword"]=$('select option[value=' + $('select').val() +']').text()
		console.log(o)
		$("#table_tz").bootstrapTable('showLoading')
		getResult('get','api.php',o)
		.then(res=>{
			console.log(res)
			html_DataVewCount(res)
			$("#table_tz").bootstrapTable('load',res.data.data.formDataList)
			$("#table_tz").bootstrapTable('hideLoading')
		})
		
	}
	
	//将form中的值转换为键值对。
	function getFormJson(frm) {
	    let o = {};
	    let a = $(frm).serializeArray();
	    $.each(a, function () {
	        if (o[this.name] !== undefined) {
	            if (!o[this.name].push) {
	                o[this.name] = [o[this.name]];
	            }
	            o[this.name].push(this.value || '');
	        } else {
	            o[this.name] = this.value || '';
	        }
	    });
	
	    return o;
	}
	
	//请求GET封装
	function getResult(method,url,params){
		return axios({
			method,url,params
		})
	}
	
	//初始化
	function init(){
		
		html_DataVewCountReset()
		loading('#loading','show')

		$("input[name='starDate']")[0].valueAsDate= new Date()
		$("input[name='endDate']")[0].valueAsDate= new Date()
		let method = 'get'
		url = 'api.php'
		params={
			"starDateTime":$("input[name='starDate']").val()+" 00:00:00",
			"endDateTime":$("input[name='endDate']").val()+" 23:59:59",
			"appid":$('select').val(),
			"Cookie":"",
			"keyword":$('select option[value=' + $('select').val() +']').text()
		}
		
		getResult(method,url,params)
		.then(res=>{
			
			html_DataVewCount(res)
			let formStruct = res.data.data.formStruct
			// console.log(res.data.data)
			let columns = []
			columns.push({field:'CREATE_TIME',title:'报名时间'})
			$.each(formStruct,n=>{
			    let item = {}
				
				if(n=="headImgUrl"){
					item['field'] = n
					item['title'] = formStruct[n]
					item['formatter'] = function(index,row,$element){
						return `<img class="img-fluid rounded-circle" src="${row.headImgUrl}"></img>`
					}
				}else{
					item['field'] = n
					item['title'] = formStruct[n]
				}
				
				columns.push(item)
			})

			let data = res.data.data.formDataList
			$("#table_tz").bootstrapTable({
				data,
				columns,
				pagination:true,
				sidePagination:true,
				pageSize:5,
				pageList:[5,10,15,20,1000],
				showToggle:true,
				
			  
			})
			
			loading('#loading','hide')

		})
		
	}
	
	$("#exportExcel").click(function(){
		
		let fileName = $('select option[value=' + $('select').val() +']').text()
		
		fileName += new Date().toLocaleString()
		console.log(fileName)
		$('#table_tz').tableExport({type:'excel',tableName:fileName});

	})
	
	
	//loading

	function loading(ele,type) {
	
		if(type=='show'){
			$(ele).css("display","inline-block")
		}else{
			$(ele).css("display","none")
		}
	}

	//页面数据置零功能
	function html_DataVewCountReset(){
		$("#dataVewCount div")[2].innerHTML = '用户：loading...' 
		$("#dataVewCount div")[0].innerHTML = '浏览人数：loading...'
		$("#dataVewCount div")[1].innerHTML = '表单数：loading...' 
	}
	//页面数据渲染功能
	function html_DataVewCount(data){
	
		data = data.data
		
		console.log(data)
		let formCount = data.index.data[0].formCount
		let pv = data.index.data[0].viewCount
		let index_list = data.list.data.list
		let audienceCountBool = true
		$.each(index_list,n=>{

			if(index_list[n]['id'] == $('select').val()){
				$("#dataVewCount div")[2].innerHTML = '用户：' + index_list[n]['audienceCount']
				audienceCountBool=false
			}
		})
		
		if(audienceCountBool){
			$("#dataVewCount div")[2].innerHTML = '用户：未知' 
		}
		
		
		$("#dataVewCount div")[0].innerHTML = '浏览人数：' + pv
		$("#dataVewCount div")[1].innerHTML = '表单数：' + formCount
	}
})
	  
	   
</script>

